<script setup lang="ts">
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import type { CompetitionCardProps } from '../types/CompetitionCardProps'
import { Button } from 'ant-design-vue';

const props = defineProps<{ app: CompetitionCardProps, }>();

const router = useRouter()

onMounted(() => {
});

const handleInfo = () => {
  if (props.app.competitionId)
    router.push({ name: 'competitionDetails', params: { competitionId: props.app.competitionId } })
};
</script>

<template>
  <div style="padding: 0.5rem; background-color: white; border-radius: 0.5rem;">
    <span v-if="props.app.top === 1">置顶</span>

    <h1 style="font-weight: bold; text-align: center; margin: 0rem;">
      {{ props.app.title }}
    </h1>

    <p>{{ props.app.date }}</p>

    <p style="margin: 0rem; margin-bottom: 0.5rem;">
      {{ props.app.description }}
    </p>

    <div style="display: flex; justify-content: right;">
      <Button class="detail-button" @click="handleInfo">
        查看详情
      </Button>
    </div>
  </div>
</template>

<style scoped>
.detail-button {
    background-color: #e6f0ff;
    color: #2669f3;
    border: none;
    font-size: 1rem;
    border-radius: 0.2rem;
    padding: 0.2rem 0.5rem 0.2rem 0.5rem;
    cursor: pointer;
}
</style>
